<template>
  <div class="common-layout">
    <el-container>
      <el-header style="height: 400px">
        <!-- <el-carousel :interval="4000" type="card" height="350px">
          <el-carousel-item
            v-for="item in list"
            :key="item"
            style="width: 526px"
          >
            <h3 text="2xl" justify="center">
              <img :src="item" />
            </h3>
          </el-carousel-item> </el-carousel
      > -->
      <el-carousel :interval="5000" arrow="always" 
      height="400px" >
    <el-carousel-item v-for="item in list" :key="item">
      <h3 text="2xl" justify="center"> <img :src="item" /></h3>
    </el-carousel-item>
  </el-carousel>
    </el-header>

      <el-main
        ><div class="common-layout1">
          <el-container>
            <el-aside width="200px">
              <el-row class="tac">
                <el-col>
                  <!-- <h5 class="mb-2">Default colors</h5> -->
                  <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="transparent"
                    text-color="black"
                    active-background-color="black"
                  >
                    <el-sub-menu index="1" style="color:white">
                      <template #title>
                        <el-icon 
                        
                        ><Shop color="white"/></el-icon>
                        <span style="color:white">关于我们</span>
                      </template>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                      <template #title>
                        <el-icon><Memo color="white" /></el-icon>
                        <span style="color:white">新书上线</span>
                      </template>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                      <template #title>
                        <el-icon><User color="white" /></el-icon>
                        <span style="color:white">会员权力</span>
                      </template>
                    </el-sub-menu>
                    <el-sub-menu index="4">
                      <template #title>
                        <el-icon><Ticket color="white" /></el-icon>
                        <span style="color:white">好书折扣</span>
                      </template>
                    </el-sub-menu>
                  </el-menu>
                </el-col>
              </el-row></el-aside
            >
            <el-main style="height: 460px">
              <second-information v-if="secondflag"></second-information>
              <first-information v-if="firstflag"></first-information>
              <third-information v-if="thirdflag"></third-information>
              <four-information v-if="fourflag"></four-information>
            </el-main>
          </el-container></div></el-main>
      <!-- <hr /> -->
      <el-footer style>
<p style="color:white">网站备案号:粤ICP备2023012217号</p>

      </el-footer>
    </el-container>
  </div>
</template>
  <script>
import SecondInformation from "./SecondInformation.vue";
import FirstInformation from "./FirstInformation.vue";
import ThirdInformation from "./ThirdInformation.vue";
import FourInformation from "./FourInformation.vue";

export default {
  components: {
    SecondInformation,
    FirstInformation,
    ThirdInformation,
    FourInformation,
  },
  name: "Index",
  data() {
    return {
      list: {
        img1: "http://image31.bookschina.com/pro-images/230222rd/990360.jpg?id=115",
        img2: "http://image31.bookschina.com/pro-images/230224ms/990360.jpg?id=115",
        img3: "http://image31.bookschina.com/uploadfiles/images/20596_ad990.jpg?id=30",
       },
      secondflag: false,
      firstflag: false,
      thirdflag: false,
      fourflag: false,
    };
  },
  created: function () {
    this.handleOpen(1, null);
  },
  methods: {
    handleOpen(key, keypath) {
      if (key == 1) {
        this.firstflag = true;
        this.secondflag = false;
        this.thirdflag = false;
        this.fourflag = false;
      } else if (key == 2) {
        this.secondflag = true;
        this.firstflag = false;
        this.thirdflag = false;
        this.fourflag = false;
      } else if (key == 3) {
        this.thirdflag = true;
        this.firstflag = false;
        this.secondflag = false;
        this.fourflag = false;
      } else if (key == 4) {
        this.fourflag = true;
        this.firstflag = false;
        this.secondflag = false;
        this.thirdflag = false;
      }
    },
    handleClose(key, keypath) {
      if (key == 1) {
        this.firstflag = true;
        this.secondflag = false;
        this.thirdflag = false;
        this.fourflag = false;
      } else if (key == 2) {
        this.secondflag = true;
        this.firstflag = false;
        this.thirdflag = false;
        this.fourflag = false;
      } else if (key == 3) {
        this.thirdflag = true;
        this.firstflag = false;
        this.secondflag = false;
        this.fourflag = false;
      } else if (key == 4) {
        this.fourflag = true;
        this.firstflag = false;
        this.secondflag = false;
        this.thirdflag = false;
      }
    },
  },
};
</script>
  <style>
.common-layout {
  /* position: absolute; */
  /* margin-top: 7.0%; */
  width: 100%;
  display: block;
  /* margin-left: 70px; */ height: 55rem;
  background-image: url("../../assets/5.jpg");
 
    background-size: cover;
    background-repeat: no-repeat;
}
.el-header {
  width: 100%;
  height: 12rem;
  margin: 0;
  padding: 0;
  
}
.el-main {
  height: 26rem;
}
.el-carousel__indicators--outside {
  bottom: calc(
    var(--el-carousel-indicator-height) +
      var(--el-carousel-indicator-padding-vertical) * 2
  );
  text-align: center;
  margin-left: -365px;
  position: static;
  transform: none;
}
.el-aside {
  margin-top: 84px;
}
.el-carousel--horizontal {
  overflow-x: hidden;
  position: absolute;
  width: 1092px;
  margin-left: 15%;
}
.el-card.is-always-shadow {
  position: absolute;
  margin-left: 16%;
  box-shadow: var(--el-box-shadow-light);
}
.el-carousel__container {
  position: relative;
  margin-top: 1.1%;
}
/* 整个滚动条 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  background-color: #e8edf0;
  /* 关键代码 */
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(11, 95, 136, 0.751) 25%,
    transparent 25%,
    transparent 50%,
    rgba(11, 95, 136, 0.751) 50%,
    rgba(11, 95, 136, 0.751) 75%,
    transparent 75%,
    transparent
  );
  border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #e6f4ff;
  border-radius: 32px;
}
.el-carousel--horizontal {
  overflow-x: hidden;
  margin-left: 16.2%;
}
.el-icon svg {
    height: 1em;
    color: white;
    width: 1em;
}

/* .el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
} */

/* .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
} */

/* .el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
} */
</style>